<template>
	<view>
		<view class="header">
			<view class="one">
			</view>
			
			<view class="two">
				<view class="white" style="margin-top: 30upx;font-size: 102upx;color: #fff;font-weight: 555;">
					{{integration}}
				</view>
				<view style="color: #fff;font-size: 32upx;margin-top: -30upx;">以累计获得的积分</view>
				<!-- <view class="status white" ></view> -->
			</view>
			
			<view class="one" style="position: relative;">
			</view>
		</view>
		<view style="width: 95%;margin: -170upx auto 0;background-color: #fff;border-radius: 15upx 15upx 0 0;">
			
			<view style="height: 90upx;line-height: 90upx;overflow: hidden;" @tap="toggleTab()">
				<view style="font-size: 42upx;text-align: center;height: 90upx;line-height: 90upx;margin: 0 60upx 30upx;border-bottom: 6upx solid #ccc;">{{my_year}}/{{my_month}}</view>
			</view>
			
			<!-- 日(分成5排,一排7个) -->
			<view class="week" style="margin-top: 20upx;position: relative;">
				<view  v-for="(item,index) in oneweek" :key="index" style="display: inline-block;width: 14.2%;position: relative;height: 50upx!important;" class="day">
					<view style="text-align: center;">{{item}}</view>
				</view>
			</view>
			<view class="week" style="position: relative;padding-top: 0;">
				<view  v-for="(item,index) in res.data" :key="index" style="display: inline-block;width: 14.2%;position: relative;" class="day">
					<view style="text-align: center;z-index: 555;position: relative;">
						<text  :class="item.is_sign_in!=0 ? 'day_sure' : 'day_false'">{{item.day}}</text>
					</view>
					<view style="position: absolute;width: 100%;height: 100%;border: 1upx solid #fff;top: 0;left: 0;box-sizing: border-box;opacity: 0.1;"></view>
					<text style="font-size: 18upx;margin-top: 50upx;position: absolute;right: 26upx;bottom: 0;color: #fff;background-color: #ddd;border-radius: 40upx;width: 58upx;text-align: center;" v-if="item.is_sign_in!=0" >+{{item.integral}}</text>
					<image src="../../../static/zhengque.png" mode="widthFix" style="width: 66upx;position: absolute;right: 20upx;top: -10upx;" v-if="item.is_sign_in!=0"></image>
				</view>
			</view>
			<view style="height: 20upx;border-radius: 0 0 15upx 15upx;box-shadow: 0 10upx 10upx #dfdfdf;"></view>
		</view>
		
		<!-- <view style="width: 100%;height: 50upx;font-size: 40upx;line-height: 50upx;text-align: center;color: #555;margin-top: 90upx;">
			您以连续签到<text style="color: #E84C47;font-size: 60upx;padding: 0 20upx;">{{1}}</text>天
		</view> -->
		
		<view style="width: 500upx;height: 90upx;font-size: 50upx;line-height: 85upx;text-align: center;color: #555;margin: 0 auto;color: #fff;background-color: #EA4B48;margin-top: 40upx;" @click="signin">
			{{sign}}
		</view>
		<yu-datetime-picker @confirm="onConfirm" startYear="2019" ref="dateTime" :value="time_value" :isAll="true" :current="false" style="z-index: 999;"></yu-datetime-picker>
	</view>
</template>

<script>
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	export default {
		components: {
			yuDatetimePicker
		},
		data() {
			return {
				res:[],
				user_id:'',
				sign:'点击签到',
				disabled:'disabled',
				signed:'',
				my_year:'',
				my_month:'',
				showorhide:'none',
				time_value: '2019-11-10 08:30:01',
				integration:'',
				oneweek:['日','一','二','三','四','五','六']
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				}
			});
		},
		methods:{
			setAjax(){
				var date = new Date()
				this.my_year = date.getFullYear()
				this.my_month = date.getMonth()+1
				
				this.time_value = this.time_value.replace(2019,this.my_year)
				this.time_value = this.time_value.replace(11,this.my_month)
				
				uni.hideLoading()
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/SignIn/index',
					method: 'POST',
					data:{
						user_id: this.user_id,
						year: this.my_year,
						month: this.my_month,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						uni.hideLoading()
						this.res = res.data
						console.log(this.res)
						this.integration = res.data.signSum // 累计积分
						var sign = res.data.signcontent
						if (sign == 0 ) {
							this.sign = '未签到'
						}
						if (sign == 1 ) {
							this.sign = '已签到'
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
				
			},
			select() {
				this.showorhide = 'block'
			},
			jump(e){
				console.log(e.currentTarget.dataset.src)
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			signin(){
				// this.signed = 1
				this.sign = '已签到'
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/SignIn/signIn',
					method: 'POST',
					data: {
						'user_id':this.user_id,
						'session_id': uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						console.log(res)
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 200) {
							this.setAjax()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			toggleTab(item, index) {
				this.$refs.dateTime.show();
			},
			onConfirm(val) {
				this.my_year = val.selectArr[0]
				this.my_month = val.selectArr[1]
				// 日期接口
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/SignIn/index',
					method: 'POST',
					data:{
						user_id: this.user_id,
						year: this.my_year,
						month: this.my_month,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.hideLoading()
						this.res = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	.header {
		text-align: center;
		display: flex;
		height: 440upx;
		background-image: url(https://cx.mingmeijt.com/Static/Pc/images/qdbj.png);
		background-repeat:no-repeat;
		background-size:100% 100%;
	}
	.one {
		flex: 1;
	}
	.one_one {
		margin-top: 150upx;
		color: #FFFFFF;
	}
	.two {
		flex: 3;
	}
	.avatar image {
		margin-top: 50upx;
		border-radius: 100upx;
		background-color: #fff;
	}
	.white {
		color: #fff;
	}
	.yellow {
		color: yellow;
	}
	.status {
		font-size: 32upx;
		padding: 5upx 8upx;
		width: 150upx;
		display: inline-block;
		border: 1px solid #fff;
		border-radius: 50upx;
	}
	.day {
		height: 97upx;
	}
	.day_false {
		color: #000;
	}
	.day_sure {
		color: #fff;
	}
	.week {
		position: relative;
		background-color: #FFFFFF;
	}
	.scroll {
		position: absolute;
		z-index: 99;
		top: 60upx;
		left: 60upx;
		background-color: #eee;
		border: 2upx;
	}
</style>
